<template>
	<view class="container">
		<view class="u-wrap">
			<!-- <u-swiper :list="swiperList" indicator="true" indicatorMode="dot" 
			circular='true' previousMargin='30' nextMargin='30' bgColor="#fff"></u-swiper> -->

			<!-- <u-gap height="10" bg-color="#21d936"></u-gap> -->

			<u-tabs :list="tabsList" :current="currentTab" :activeStyle="activeTab" @change="clickTab"></u-tabs>

			<u-gap height="5" bg-color="#21d936"></u-gap>
			<view class="line"></view>

			<!-- menu start -->
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
					:show-scrollbar="false" enhanced>
					<view v-for="(item,index) in menuList" :key="index" class="u-tab-item"
						:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
						@tap.stop="swichMenu(index)">
						<!-- <u-image :src="item.image" width="60" height="60" class="menuimg"></u-image> -->
						<text class="tabMenu-name">{{item.name}}</text>
					</view>
					<u-gap height="300" bg-color="#FFFFFF"></u-gap>
				</scroll-view>
				<swiper class="flex-sub h100" :current="current" @change="swiperChange">
					<swiper-item class="flex" v-for="(item,index) in menuList" :key="index">
						<!-- <block v-for="(item,index) in menuList" :key="index"> -->
						<scroll-view scroll-y class="right-box" v-if="current==index" :show-scrollbar="false" enhanced>
							<view class="right-box__swiper">
								<u-swiper :list="bannerList" indicator="true" indicatorMode="dot" circular='true'
									bgColor="#fff" height="100"></u-swiper>
							</view>
							<view class="page-view">

								<view class="class-item">
									<view class="class-item-box" v-for="(item1, index1) in item.foods" :key="index1">
										<image class="item-menu-image" :src="item1.icon" mode="aspectFill"></image>
										<view class="item-menu-name">
											<text class="item-menu-name__name">{{item1.name}}</text>
											<view class="item-menu-name__desc u-line-2">
												{{item1.desc}}
											</view>
											<view class="item-menu-price">
												<view class="item-menu-price__color">
													<text class="item-menu-price__text">￥</text>
													{{item1.price}}
												</view>
												<view>
													<u-number-box :min="0" :max="2" :disabledInput="true"
														v-model="item1.value" :longPress="false" color="#323233"
														bgColor="#EE2F37" :iconStyle="iconStyle" @plus="plusMenu(item1)"
														@minus="minusMenu(item1)"></u-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-gap height="200" bg-color="#FAFAFA"></u-gap>
						</scroll-view>
						<!-- </block> -->
					</swiper-item>
				</swiper>
			</view>
			<!-- menu end -->

			<!-- bottom start-->
			<view class="u-bottom">
				<view class="u-bottom__wrap" @click="MenuPopup">
					<view class="u-bottom__bags">
						<u-badge :value="menuNum" bgColor="#fa3534" :absolute="true" :offset="[0,-8]"></u-badge>
						<u-icon name="/static/images/menu/bags.png" size="28"></u-icon>
					</view>
					<view class="u-bottom__price">
						<text>￥</text>
						{{(Math.abs(menuPrice) === 0 ? '0.00' : menuPrice.toFixed(2))}}
					</view>
					<view class="u-bottom__nums">共 {{menuNum}} 件商品</view>
				</view>
				<view class="u-bottom__place" @click="settlement">
					去结算
				</view>
			</view>
			<!-- bottom start -->
		</view>

		<!-- popup start -->
		<u-popup :show="PopupShow" mode="bottom" round="14" closeable="true" :safeAreaInsetBottom="false"
			@close="close">
			<view class="popup-wrap">
				<!-- clearshoppingCar -->
				<!-- <view class="emptyShop" @click="clickEmptyShop">
					<u-icon name="trash" class="emptyShop__icon"></u-icon>清空购物车
				</view> -->
				<u-gap height="30"></u-gap>
				<!-- menulist -->
				<scroll-view class="cart-list" scroll-y>
					<view class="menulist" v-for="(item, i) in SelectMenu" :key="i">
						<text>{{ item.date }}-{{ item.name }}</text>
						<view class="foodlist" v-for="(food, index) in item.foods" :key="index">
							<image class="item-menu-images" :src="food.icon" mode="aspectFill"></image>
							<view class="item-menu-name">
								<text class="item-menu-name__name">{{food.name}}</text>
								<view class="item-menu-name__desc">
									{{food.desc}}
								</view>
								<view class="item-menu-price">
									<view class="item-menu-price__color">
										<text class="item-menu-price__text">￥</text>
										{{food.price}}
									</view>
									<view>
										<u-number-box :min="0" :max="100" :disabledInput="true" v-model="food.value"
											:longPress="false" color="#323233" bgColor="#EE2F37" @plus="plusMenu(food)"
											@minus="minusMenu(food)"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- popup end -->

	</view>
</template>

<script>
	import menuLists from '@/api/system/menu.js';
	export default {
		data() {
			return {
				bannerList: [
					'/static/images/menu/banner-1.jpg',
					'/static/images/menu/banner-2.jpg',
					'/static/images/menu/banner-3.jpg'
				],
				tabsList: [{
					name: '3月1日（周一）'
				}, {
					name: '3月2日（周二）'
				}, {
					name: '3月3日（周三）'
				}, {
					name: '3月4日（周四）'
				}, {
					name: '3月5日（周五）'
				}],
				activeTab: {
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				currentTab: 0,
				menuList: [],
				scrollTop: 0,
				current: 0,
				SelectMenu: [],
				PopupShow: false,
				// 菜品总数量与价格
				menuNum: 0,
				menuPrice: 0,
				menuHeight: 0,
				menuItemHeight: 0,
			}
		},
		onUnload() {
			// init
			this.clickEmptyShop();
		},
		onLoad() {
			this.menuList = menuLists.mondayMenuList
		},
		methods: {
			// 清空购物车
			clickEmptyShop() {
				// menuNuminit
				this.SelectMenu.forEach(food => {
					food.value = 0;
				});
				//init
				this.SelectMenu = [];
				this.PopupShow = false;
				this.menuNum = 0;
				this.menuPrice = 0;
			},
			// 点击左侧菜单
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			// 菜品+
			plusMenu(param) {
				this.menuNum++;
				this.menuPrice += Number(param.price);
				// let found = this.SelectMenu.find(product => product.id == param.id);
				// if (!found) {
				// 	this.SelectMenu.push(param);
				// }

				this.$nextTick(() => {
					// for (const menu of this.menuList) {
					// 	for(const food of menu.foods) {
					// 		if(food.value !== 0) {
					// 			console.log(food)
					// 		}
					// 	}
					// }
					const mapData = this.menuList.map(item => {
						return {
							date: item.date,
							name: item.name,
							foods: item.foods.filter(food => food.value !== 0)
						}
					})
					const filterData = mapData.filter(item => item.foods.length !== 0)

					filterData.forEach((item) => {
						this.updateSelectMenu(this.SelectMenu, item);

					})
				})
			},
			updateSelectMenu(arr, newItem) {
				let found = false;
				// 遍历数组并检查每个对象
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].date === newItem.date && arr[i].name === newItem.name) {
						// 如果找到匹配的对象，则替换它
						arr[i] = newItem;
						found = true;
						break;
					}
				}

				// 如果没有找到匹配的对象，则添加新对象
				if (!found) {
					arr.push(newItem);
				}
			},
			// 菜品-
			minusMenu(param) {
				this.menuNum--;
				this.menuPrice -= Number(param.price)
				this.$nextTick(() => {
					// 过滤掉value为0的food对象，如果整个foods数组都为空，则过滤掉整个对象
					this.SelectMenu = this.SelectMenu.filter(menuItem => {
						// 过滤掉value为0的food对象
						menuItem.foods = menuItem.foods.filter(food => food.value !== 0);
						// 如果过滤后的foods数组不为空，则保留这个对象
						return menuItem.foods.length > 0;
					});
					// 购物车清空
					if (this.SelectMenu.length === 0) {
						this.PopupShow = false;
					}
				})

				// let product = this.SelectMenu.find(product => product.id == param.id);
				// if (product) {
				// 	this.menuNum--;
				// 	this.menuPrice -= Number(product.price);
				// }
			},
			// 购物车弹窗
			MenuPopup() {
				if (this.menuNum != 0 && this.menuPrice != 0) {
					this.PopupShow = true;
					// this.$refs.popup.open('bottom')
					// init
					this.SelectMenu = this.SelectMenu.filter(item => item.value !== 0);
				}
			},
			swiperChange(e) {
				this.current = e.detail.current;

			},
			close() {
				this.PopupShow = false;
			},
			clickTab(item) {
				if (item.index === 0) {
					this.menuList = menuLists.mondayMenuList
				} else {
					this.menuList = menuLists.tusdayMenuList
				}
				this.current = 0
			},
			// 去结算
			settlement() {
				if (this.menuNum != 0 && this.menuPrice != 0) {
					// init
					// this.SelectMenu = this.SelectMenu.filter(item => item.value !== 0);
					// console.log(this.SelectMenu)
					let key = {
						order: this.SelectMenu,
						menuPrice: this.menuPrice,
						menuNum: this.menuNum
					}
					uni.setStorage({
						key: 'dishData',
						data: key,
						success: () => {
							uni.navigateTo({
								url: "/pages/subPack/index/indexSettlement"
							})
						}
					});
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uni-bg-color;

		.u-wrap {
			height: 100vh;
			display: flex;
			flex-direction: column;

			// menu
			.u-menu-wrap {
				flex: 1;
				display: flex;
				overflow: hidden;

				// 左侧菜单
				.u-tab-view {
					width: 160rpx;
					height: 100%;
					background-color: #FFFFFF;

					.u-tab-item {
						height: 160rpx;
						background: #FFFFFF;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						font-weight: 600;
						color: #8D9699;
						font-weight: 400;
						line-height: 1;

						.tabMenu-name {
							text-align: center;
							padding: 0 10rpx;
							font-size: 40rpx;
						}
					}

					.u-tab-item-active {
						position: relative;
						color: #EE2F37;
						font-size: 22rpx;
						font-weight: 600;
						background: #FAFAFA;

						&::before {
							content: "";
							position: absolute;
							border-left: 2px solid #EE2F37;
							height: 160rpx;
							left: 0;
							top: 0;
						}
					}
				}

				// 右侧菜单
				.right-box {
					background-color: #FAFAFA;

					// 轮播图
					&__swiper {
						margin: 0 30rpx;
						padding-top: 16rpx;
					}

					.page-view {
						padding: 16rpx;

						.class-item {
							margin-bottom: 30rpx;
							padding: 16rpx;
							border-radius: 8rpx;

							// 菜品
							&-box {
								display: flex;
								background-color: white;
								padding: 20rpx;
								margin-bottom: 20rpx;
								box-shadow: 2px 0px 8px 0px rgba(244, 244, 245, 0.75);
								border-radius: 14rpx;

								.item-menu-image {
									width: 50%;
									height: 160rpx;
									border-radius: 20rpx;
								}
							}
						}
					}
				}
			}

			// 结算按钮
			.u-bottom {
				position: fixed;
				z-index: 77777;
				bottom: 30rpx;
				width: 92%;
				left: 0;
				right: 0;
				margin: 0 auto;
				display: flex;
				box-shadow: 2px 0px 8px 0px rgba(200, 201, 204, 0.75);
				border-radius: 14rpx;
				background-color: white;

				&__bags {
					position: relative;
				}

				&__price {
					font-weight: bold;
					font-size: 40rpx;
					margin-left: 20rpx;

					text {
						font-size: 24rpx;
					}
				}

				&__nums {
					border-left: 1px solid #303133;
					font-size: 24rpx;
					margin-left: 20rpx;
					padding-left: 20rpx;
					font-weight: bold;
				}

				&__wrap,
				&__place {
					display: flex;
					color: #303133;
				}

				&__wrap {
					width: 70%;
					padding: 20rpx 0 20rpx 30rpx;
					align-items: center;
				}

				&__place {
					background-color: #EE2F37;
					width: 30%;
					text-align: center;
					flex-direction: column;
					justify-content: center;
					font-size: 32rpx;
					font-weight: bold;
					color: white;
					border-top-right-radius: 14rpx;
					border-bottom-right-radius: 14rpx;
				}
			}
		}

		// 购物车弹窗
		.popup-wrap {
			// margin: 20rpx 30rpx 0 30rpx;
			// padding-bottom: 30rpx;
			padding: 30rpx;
			padding-bottom: 110rpx;

			// .emptyShop {
			// 	// position: fixed;
			// 	// top: 0;
			// 	// left: 0;
			// 	width: 100%;
			// 	background-color: #fff;
			// 	color: $u-info;
			// 	font-size: 24rpx;
			// 	border-bottom: 1px solid #f3f4f6;
			// 	z-index: 2;
			// 	padding: 20rpx;
			// 	display: flex;
			// 	justify-content: flex-end;

			// 	&__icon {
			// 		margin-right: 20rpx;
			// 	}
			// }

			.cart-list {
				width: 100%;
				overflow: hidden;
				min-height: 1vh;
				max-height: 60vh;

				.foodlist {
					display: flex;
					margin-bottom: 30rpx;

					.item-menu-images {
						width: 30%;
						height: 130rpx;
						border-radius: 20rpx;
					}
				}
			}
		}

		// 菜品名称
		.item-menu-name {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			width: 100%;

			&__name {
				font-weight: bold;
				font-size: 30rpx;
			}

			&__desc {
				margin: 20rpx 0;
				font-size: 20rpx;
				color: $u-info;
			}
		}

		// 价格
		.item-menu-price {
			display: flex;
			justify-content: space-between;

			&__color {
				font-weight: bold;
				font-size: 36rpx;
				color: #EE2F37;
			}

			&__text {
				font-size: 22rpx;
			}
		}

		// 分割线
		.line {
			width: 100%;
			border-bottom: 1px solid #ff0000;
		}
	}
</style>